<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>取消订单</span>
        <el-button style="float: right" size="mini" @click="fanhui()">返回</el-button>
      </div>
      <div>
        <el-form
          ref="form"
          style="margin-left: 350px;margin-top: 10px;"
          :model="form"
          label-width="100px"
        >
          <el-form-item label="操作备注:">
            <el-input
              type="textarea"
              style="width: 300px;"
              :autosize="{ minRows: 3, maxRows: 4}"
              v-model="form.remark"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="取消原因:">
            <el-input
              type="textarea"
              style="width: 300px;"
              :autosize="{ minRows: 3, maxRows: 4}"
              v-model="form.desc"
            ></el-input>
          </el-form-item>-->
          <el-form-item label="订单金额:">
            <a>￥{{(orderInfo.payMoney/100).toFixed(2)}}</a>
          </el-form-item>
          <el-form-item label="退运费:">
            <el-radio-group v-model="form.isReturnFreight">
              <el-radio label="0">不退运费</el-radio>
              <el-radio label="1">退运费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="确认退款金额:">
            <el-input v-model.number="returnMoney">
              <a slot="prefix">￥</a>
            </el-input>
          </el-form-item>
          <el-form-item label="退款方式:">
            <el-radio-group v-model="tuikuanfs">
              <el-radio label="1" disabled>退回到原支付渠道</el-radio>
              <el-radio label="2">生成退款申请</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="退款说明:">
            <el-input
              type="textarea"
              style="width: 300px;"
              :autosize="{ minRows: 3, maxRows: 4}"
              v-model="form.description"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button>取 消</el-button>
            <el-button type="primary" @click="qdquxiao()">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      orderInfo: {},
      form: {
        orderId: '',
        remark: '',
        isReturnFreight: '1',
        returnMoney: 0,
        description: ''
      },
      orderId: '',
      tuikuanfs: '2',
      returnMoney: 0
    };
  },
  created () {
    // 取到路由带过来的参数
    this.orderId = this.$route.query.id;
    this.getOrderInfo()
  },
  methods: {
    async getOrderInfo () {
      // 根据id获取订单信息
      const { data: res } = await this.$http.get(
        `vi/order/order/detail/${this.orderId}`
      );
      this.orderInfo = res.data.tbOrder
      this.form.orderId = this.orderInfo.id
      this.form.returnMoney = this.orderInfo.payMoney
      this.returnMoney = (this.form.returnMoney / 100).toFixed(2)
    },
    // 确定取消
    async qdquxiao () {
      if (this.form.remark === '') {
        // 提示信息
        this.$message({
          type: "info",
          message: "操作备注不能为空"
        });
        return
      }
      if (this.form.returnMoney > Number(this.orderInfo.payMoney)) {
        // 提示信息
        this.$message({
          type: "info",
          message: "退款金额超出订单金额"
        });
        return
      }
      if (this.form.description === '') {
        // 提示信息
        this.$message({
          type: "info",
          message: "退款说明不能为空"
        });
        return
      }
      this.form.returnMoney = this.returnMoney * 100
      const { data: res } = await this.$http.post(
        `vi/order/order/quxiaoDD`,
        this.form
      );
      // 提示信息
      this.$message({
        type: "success",
        message: "操作成功"
      });
      // 跳转页面
      this.$router.push({
        query: {
          id: this.orderId
        },
        path: "/home/order/orderDetails"
      });

    },
    fanhui () {
      // 跳转页面
      this.$router.push({
        query: {
          id: this.orderId
        },
        path: "/home/order/orderDetails"
      });
    }
  }
};
</script>
<style scoped>
.el-input {
  width: 200px;
}
</style>